<template>
    <div class="page-container">
        <div class="top-container">
            <el-button type="primary" @click="handleNewTask" class="custom-button">返回</el-button>
            <div class="right-section">
                <el-checkbox :model-value="isAllSelected" @change="handleSelectAll"
                    class="select-all-checkbox">全选</el-checkbox>
<!--                <el-button type="success" @click="handlePublish" class="custom-button">发布</el-button>
                <el-button type="danger" @click="handleDelete" class="custom-button">删除</el-button>
                <el-button type="warning" @click="handleDownload" class="custom-button">下载</el-button>-->
            </div>
        </div>
        <div class="content-wrapper">
            <div class="content-list">
                <el-row :gutter="24">
                    <el-col
                        v-for="item in pageData"
                        :key="item.id"
                        :xs="24"
                        :sm="12"
                        :md="8"
                        :lg="6"
                        style="display: flex; justify-content: center; align-items: center; margin-bottom: 16px;"
                    >
                        <div class="card pretty-card">
                            <!-- 多选框 -->
                            <div class="card-checkbox">
                                <el-checkbox :model-value="props.selectPicSonItem.some(selectedItem => selectedItem.id === item.id)" @change="() => handleSelectItem(item.id)" />
                            </div>
                            <div class="pretty-img-wrapper">
                                <img :src="item.url || ''" class="pretty-img" />
                            </div>
                            <div class="pretty-time-bar">
                                <span class="pretty-time">{{ item.create_time }}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="pagination-bar">
                <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                    :page-sizes="[10,20,50,100]"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps, defineEmits, watch, computed } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import utils from '../../utils/utils';

//主题控制light  dark
const theme = utils.getTheme();

const props = defineProps<{
    videoId: number
    selectPicSonItem: any[]
}>()

const emit = defineEmits(['back', 'update:selectPicSonItem'])

const videoType = ref('')
const searchText = ref('')
const currentPlayingVideo = ref<number | null>(null)

// 计算全选状态
const isAllSelected = computed(() => {
    return props.selectPicSonItem.length === pageData.value.length && pageData.value.length > 0
})

const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const pageData = ref([])
const loading = ref(false)

const fetchList = async () => {
  loading.value = true
  const response = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_image_task', {
    id: props.videoId
  })
  loading.value = false
  if (response.data.code === 1 && response.data.data.list) {
    pageData.value = response.data.data.list
    total.value = response.data.data.all_handle || 0
  }
}

onMounted(() => {
  document.body.classList.remove('login-page')
  fetchList()
})



const handleNewTask = () => {
  // 清空选择状态
  emit('update:selectPicSonItem', [])
  emit('back')
}

const handlePublish = () => {
  // 处理发布
}

const handleDelete = () => {
  // 处理删除
}

const handleDownload = () => {
  // 处理下载
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchList()
}
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchList()
}

// 搜索和筛选
const handleSearch = () => {
  currentPage.value = 1
  fetchList()
}
const handleTypeChange = () => {
  currentPage.value = 1
  fetchList()
}

const handleSelectAll = () => {
  const currentIsAllSelected = props.selectPicSonItem.length === pageData.value.length && pageData.value.length > 0
  
  if (!currentIsAllSelected) {
    // 全选时，将所有项目添加到数组
    const newSelection = [...pageData.value]
    emit('update:selectPicSonItem', newSelection)
  } else {
    // 取消全选时，清空数组
    emit('update:selectPicSonItem', [])
  }
}

const handleSelectItem = (id: number) => {
  // 通过id找到选择的条目
  const selectedItem = pageData.value.find(item => item.id === id)
  
  if (selectedItem) {
    const currentSelection = [...props.selectPicSonItem]
    const existingIndex = currentSelection.findIndex(item => item.id === id)
    
    if (existingIndex === -1) {
      // 添加到选择数组
      currentSelection.push(selectedItem)
    } else {
      // 从选择数组中移除
      currentSelection.splice(existingIndex, 1)
    }
    
    // 更新父组件的选择状态
    emit('update:selectPicSonItem', currentSelection)
  }
}

const handleVideoClick = (item: any) => {
    // 移除点击播放视频逻辑
}
</script>

<style scoped>
.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    backdrop-filter: blur(10px);
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 8px;
    box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    position: relative;
    overflow: hidden;
}

.top-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
}

.right-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-type {
    width: 120px;
}

.search-input {
    width: 200px;
}

/* 自定义按钮样式 */
.custom-button {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

.custom-button:hover {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.4)"') !important;
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
}

/* 自定义下拉框样式 */
.custom-select :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    box-shadow: none !important;
}

.custom-select :deep(.el-input__inner) {
    color: #fff !important;
}

.custom-select :deep(.el-input__wrapper:hover) {
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 自定义输入框样式 */
.custom-input :deep(.el-input__wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
    box-shadow: none !important;
}

.custom-input :deep(.el-input__inner) {
    color: #fff !important;
}

.custom-input :deep(.el-input__wrapper:hover) {
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 20, 40, 0.95)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 255, 255, 0.3)"') !important;
    backdrop-filter: blur(10px);
}

:deep(.el-select-dropdown__item) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"') !important;
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.15)"') !important;
    color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

:deep(.el-select-dropdown__item.selected) {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"') !important;
    color: v-bind('theme === "light" ? "#000" : "#fff"') !important;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    min-height: 0;
    overflow: hidden;
}

.content-list {
    flex: 1;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
    padding: 16px;
    overflow-y: auto;
    margin-bottom: 16px;
}

/* 自定义滚动条样式 */
.content-list::-webkit-scrollbar {
    width: 6px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 20, 40, 0.3)"');
}

.content-list::-webkit-scrollbar-thumb {
    background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.2))"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
    box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"');
}

.content-list::-webkit-scrollbar-thumb:hover {
    background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.3))"');
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.content-list::-webkit-scrollbar-track {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 20, 40, 0.2)"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.1)"');
}

.pretty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 260px;
    min-height: 280px;
    background: rgba(255,255,255,0.18);
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.24);
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    transition: box-shadow 0.3s, transform 0.3s;
}
.pretty-card:hover {
    box-shadow: 0 12px 36px 0 rgba(31, 38, 135, 0.28);
    transform: translateY(-4px) scale(1.03);
}
.pretty-img-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 12px 6px 12px;
    box-sizing: border-box;
    background: transparent;
}
.pretty-img {
    max-width: 90%;
    max-height: 220px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    background: #f8fafc;
    object-fit: contain;
    border: 1.5px solid rgba(255,255,255,0.18);
}
.pretty-time-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 8px;
    margin-top: 4px;
}
.pretty-time {
    font-size: 0.92em;
    color: #6c757d;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    padding: 2px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.pagination-bar {
    padding: 16px 0;
    display: flex;
    justify-content: flex-end;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.select-all-checkbox {
    margin-right: 12px;
}

.select-all-checkbox :deep(.el-checkbox__label) {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.card-checkbox :deep(.el-checkbox__inner) {
    background-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 40, 80, 0.4)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.card-checkbox :deep(.el-checkbox__inner:hover) {
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 255, 255, 0.5)"');
}

.card-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
    border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 255, 255, 0.5)"');
}

@media (max-width: 1200px) {
    .pretty-card {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .pretty-card {
        width: 220px;
    }
}
</style>
